<template>
  <div class="echarts">
    <div class="box1">
      <div :id="index" class="table"></div>
    </div>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts,
  },
  data() {
    return {
      option1: {},
    }
  },
  props: {
    name: {
      type: String,
      default: '',
    },
    num: {
      type: Number,
      default: 0,
    },
    index: {
      type: String,
      default: '',
    },
  },
  watch: {
    index() {
      this.initOPtions()
      this.init()
    },
  },
  created() {},
  mounted() {
    this.initOPtions()
    this.init()
  },
  methods: {
    init() {
      this.table1()
    },
    table1() {
      if (this.index) {
        let id = this.index.toString()
        console.log('this.index :>> ', id)
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById(id))
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(this.option1)
      }
    },
    initOPtions() {
      let option = {
        value: 20, //百分比,必填
        name: '', //必填
        title: '',
        backgroundColor: null,
        color: ['#38a8da', '#d4effa'],
        fontSize: 16,
        // domEle: document.getElementById('pieDiagram'), //必填
      }

      this.backgroundColor = option.backgroundColor || '#fff'
      this.color = option.color || ['#38a8da', '#d4effa']
      this.fontSize = option.fontSize || 12
      this.domEle = option.domEle
      this.title = option.title
      let _that = this
      // 数据变化

      this.option1 = {
        backgroundColor: _that.backgroundColor,
        color: _that.color,
        series: [
          {
            name: '来源',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center',
                textStyle: {
                  fontSize: _that.fontSize,
                  fontWeight: 'bold',
                },
                formatter: '{b}\n{c}',
              },
            },
            data: [
              {
                value: _that.num,
                name: _that.name,
                label: {
                  normal: {
                    show: true,
                  },
                },
              },
              {
                value: 1000 - _that.num,
                name: '',
              },
            ],
          },
        ],
      }
    },
  },
}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.echarts {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .box1 {
    width: 100%;
    height: 100%;
  }
  //   .title {
  //     font-size: 25px;
  //     margin-left: 32px;
  //     margin-top: 20px;
  //     display: inline-block;
  //   }
  .table {
    width: 100%;
    height: 100%;
  }
  //   .subTable {
  //     width: 300px;
  //     height: 380px;
  //     display: inline-block;
  //   }
}
</style>
